<script lang="tsx">
import { Space, Popconfirm, Divider } from '@arco-design/web-vue'
import defaultSettings from '@/config/settings.json'
import { checkBtnPermission } from '@/utils'
export default defineComponent({
  props: {
    list: {
      required: true,
      type: Array as PropType<BtnItem[]>,
    },
    record: {},
  },
  setup(props) {
    const handleClick = item => {
      if (item.disabled && item.disabled({ record: props.record })) return
      if (defaultSettings.pageBtnFormServer) {
        if (item.permission && !checkBtnPermission(item.permission)) return
      }
      item.handle({ record: props.record })
    }
    const checkHidden = item => {
      return item.hidden && item.hidden({ record: props.record })
    }

    const renderItem = (item: BtnItem) => {
      if (checkHidden(item)) return <></>
      switch (item.type) {
        case 'popconfirm':
          return (
            <Popconfirm onOk={() => handleClick(item)} content={item.tip} disabled={item.disabled && item.disabled({ record: props.record })}>
              {renderBtn(item, false)}
            </Popconfirm>
          )

        default:
          return renderBtn(item)
      }
    }
    const renderBtn = (item: BtnItem, isClick = true) => {
      return (
        <div
          class={{
            btn: true,
            disabled: item.disabled?.({ record: props.record }),
          }}
          onClick={() => isClick && handleClick(item)}
        >
          {item.name}
        </div>
      )
    }
    return () => (
      <div class="group-btn">
        <Space
          size={1}
          v-slots={{
            split: () => <Divider direction="vertical" />,
          }}
        >
          {props.list?.map(item => renderItem(item))}
        </Space>
      </div>
    )
  },
})
</script>

<style lang="less" scoped>
.group-btn {
  font-size: 13px;
  .btn {
    color: rgb(var(--link-6));
    cursor: pointer;
    text-decoration: none;
    &.disabled {
      cursor: not-allowed;
      &:hover {
        cursor: not-allowed;
      }
      color: rgb(var(--link-4));
    }
  }
  :deep(.arco-divider-vertical) {
    border-color: var(--color-primary-light-1);
  }
}
</style>
